<script setup lang="ts" name="PersonComponent">
import { reactive } from 'vue';
let car = reactive({ brand: '奔驰', price: 100 });
let games = reactive([
  { id: 'game01', name: 'Dota' },
  { id: 'game02', name: 'Hearthstone' },
  { id: 'game03', name: 'Diablo' },
]);
let obj = reactive({
  a: {
    b: {
      c: 23,
      d: 45,
    },
  },
});

const changeFirstGame = () => {
  games[0].name = '仙剑奇侠传';
};

const changePrice = () => {
  car.price += 10;
  console.log(car);
};
const changeOBJ = () => {
  obj.a.b.c = 999;
};
</script>
<template>
  <div class="person">
    <p>一辆{{ car.brand }}价值{{ car.price }}元</p>
    <button @click="changePrice">修改汽车的价格</button>
    <h2>游戏列表:</h2>
    <ul>
      <li v-for="game in games" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏</button>
    <hr />
    <h2>测试{{ obj.a.b.c }}</h2>
    <button @click="changeOBJ">修改obj</button>
  </div>
</template>

<style scoped>
.person {
  color: red;
}
ul li {
  font-size: 20px;
}
</style>
